<template>
	<view class="mypage">
		<scroll-view class="content" scroll-y>
			<view class="user">
				<view class="userinfo_center">
					<view class="userinfo_center_item_img" @click="unloads">
						<view class="userlefttext">上传图像</view>
						<view style="color: #0575FF;display: flex;justify-content: flex-end;">
							<image class="icon"
								:src="FormData.avatar?FormData.avatar:'http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/default-avatar.png'">
							</image>
						</view>
					</view>
					<view class="userinfo_center_item">
						<view class="userlefttext">姓名</view>
						<view style="color: #0575FF;display: flex;justify-content: flex-end;">
							<!-- <u-input style="color: #0575FF;text-align: right;" placeholder="输入姓名" ></u-input> -->
							<input type="text" v-model="FormData.nickName" style="text-align: right;color: #0575FF;"
								placeholder="输入姓名" />
						</view>
					</view>
					<u-line></u-line>
					<view class="userinfo_center_item" @click="isshowsex=true">
						<view class="userlefttext">性别</view>
						<view style="color: #0575FF;display: flex;justify-content: flex-end;">
							<view>{{FormData.gender?(FormData.gender==1?'男':'女'):'男'}}</view>
						</view>
					</view>
					<u-line></u-line>
					<view class="userinfo_center_item">
						<view class="userlefttext">电话</view>
						<view style="color: #0575FF;display: flex;justify-content: flex-end;">
							<!-- <u-input style="color: #0575FF;text-align: right;" placeholder="输入姓名" ></u-input> -->
							<input type="text" v-model="FormData.mobile" style="text-align: right;color: #0575FF;"
								placeholder="输入手机号" />
						</view>
					</view>
					<u-line></u-line>
					<view class="userinfo_center_buttom">
						<view class="userinfo_center_buttom_item" @click="isshowmingzu=true">
							<text class="userlefttext">{{mingzuList[mingzuIndex].name}}</text>
							<text class="userrighttext">民族</text>
						</view>
						<view class="userinfo_center_buttom_item" @click="addressShow = true;">
							<text class="userlefttext">{{address?address:addressData[1]}}</text>
							<text class="userrighttext">户籍地</text>
						</view>
						<view class="userinfo_center_buttom_item"@click="dateShow=true">
							<text class="userlefttext">{{FormData.birthDate?FormData.birthDate:'请选择'}}</text>
							<text class="userrighttext">出身年份</text>
						</view>
						<view class="userinfo_center_buttom_item" @click="xuelishow=true">
							<text class="userlefttext">{{xueliList[xueliIndex].name}}</text>
							<text class="userrighttext">最高学历</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<view class="footer_bgview" @click="commit()">
				<button class="footer_btn" :disabled="!canclick">提交</button>
			</view>
			<u-action-sheet style="border-radius: 10px;" :show="isshowsex" :actions="sexList" title="请选择性别"
				openType="launchApp" @close="isshowsex = false;sexClose()" @select="sexSelect">
			</u-action-sheet>
			<u-picker :show="isshowmingzu" ref="mingzu" :columns="mingzuListcolumns" @confirm="mingzuConfirm"
				@change="bindMultiPickerColumnChange" @cancel="isshowmingzu = false"></u-picker>
			<w-picker :visible.sync="addressisShow" mode="region" :value="defaultRegion" default-type="value"
				:hide-area="false" @confirm="addressConfirm($event,'region')" @cancel="addressCancel"
				ref="region"></w-picker>
			<address-picker :show="addressShow" closeOnClickOverlay @confirm='confirmAddress'
				@cancel='addressShow=false' @close='addressShow = false' :address-data="addressData" :indexs="indexs"
				:areaId="areaId" :type="type"></address-picker>

			<!-- <u-datetime-picker :show="dateShow" v-model="value1" mode="date" @confirm="dateConfirm" @cancel="dateCancel"
				:formatter="formatter"></u-datetime-picker> -->
			<!-- <u-action-sheet :show="xuelishow" :actions="xueliList" title="请选择学历" @close="xuelishow = false;"
					@select="xueliSelect()">
				</u-action-sheet> -->
				<u-datetime-picker
					:show="dateShow"
					v-model="dateVal"
					:minDate='-631152000000'
					:maxDate="maxDate"
					mode="date"
					@confirm="dateConfirm"
					@cancel="dateCancel"
					:formatter="formatter"
					></u-datetime-picker>
					
			<u-picker :show="xuelishow" ref="xueli" :columns="xuelicolumns" @confirm="xueliConfirm"
				@change="bindMultiPickerColumnChange" @cancel="xuelishow = false"></u-picker>
		</view>
	</view>
</template>

<script>
	import Index from "@/common/index-model.js"
	import pop from "@/components/ming-pop/ming-map.vue"
	import fun from "@/common/publicFun.js"
	let index = new Index()
	let that = null
	export default {
		data() {
			return {
				dateShow:false,
				dateVal:'2023-02-01',
				maxDate:'',
				changeVal:1,
				canclick:true,
				xueli: '',
				xuelishow: false,
				xueliList: [],
				xuelicolumns: [],
				address: '',
				addressShow: false,
				indexs: [0, 0, 0],
				areaId: [610000, 610100, 610112],
				addressData: ['陕西省', '西安市', '未央区'],
				type: 3, //1-省，2-省市，3-省市区
				addressisShow: false,
				isshowsex: false,
				isshowmingzu: false,
				mingzuList: [],
				mingzuListcolumns: [],
				mingzuIndex: 0, //默认选项
				xueliIndex: 0, //默认选项
				sexList: [{
						name: '男',
						index: 1
					},
					{
						name: '女',
						index: 2
					}
				],
				FormData: {
					nickName: '',
					gender: 1,
					nation: '',
					nationName: '',
					birthDate: '',
					mobile: '',
					avatar: '',
					provinceId: 0,
					cityId: 0,
					areaId: 0,
					degree: 0
				},
			}
		},
		onLoad(opt) {
			let data = JSON.parse(opt.data);
			this.FormData.birthDate = data.birthDate
			this.FormData.nickName = data.nickName
			this.FormData.provinceId = data.provinceId
			this.FormData.cityId = data.cityId
			this.FormData.areaId = data.areaId
			this.FormData.degree = data.degree
			this.FormData.mobile = data.mobile
			this.FormData.gender = data.gender
			if(data.nation){
				this.FormData.nation = data.nation
				this.mingzuIndex = data.nation - 1
			}else{
				this.FormData.nation = 1
				this.mingzuIndex = 0
			}
			this.FormData.avatar = data.avatar
			this.areaId=[data.provinceId,data.cityId,data.areaId];
			this.addressData = [data.provinceStr,data.cityStr,data.areaStr];
			console.log('传过来的值是',opt.data,opt,opt.data.data)
			this.getNation()
			this.getxueLiData()
			let date=new Date();
			this.maxDate=date.getTime();
			this.dateVal=fun.formatDate(this.maxDate,"yyyy-MM-dd");
		},
		methods: {
			commit() {
				uni.showLoading({
					title: '请稍后。。。',
				})
				if (!this.FormData.nickName) {
					index.show_tips('请输入您的姓名');
					return false;
				}
				if (!this.FormData.birthDate) {
					index.show_tips('请选择您的生日');
					return false;
				}
				if (!this.FormData.mobile) {
					index.show_tips('请输入手机号码');
					return false;
				} else if (!index.is_phone_number(this.FormData.mobile)) {
					index.show_tips('请输入正确的手机号码');
					return false;
				}
				let sends = {
					"nickName": this.FormData.nickName,
					"gender": this.FormData.gender,
					"nation": this.FormData.nation,
					"birthDate": this.FormData.birthDate,
					"mobile": this.FormData.mobile,
					"avatar": this.FormData.avatar,
					"provinceId": this.FormData.provinceId,
					"cityId": this.FormData.cityId,
					"areaId": this.FormData.areaId,
					"degree":this.FormData.degree
				}
				console.log('提交的信息是', sends)
				index.getPublicUserMember(sends, 'client/individual/information', 'post', res => {
					if (res.data.code == 200 && res.data.success) {
						index.show_tips('个人信息修改成功')
						this.canclick = false
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					} else {
						index.show_tips(res.data.message);
						return false
					}
				})
			},
			xueliConfirm(e) {
				console.log('选择的学历信息', e)
				this.xuelishow = false
				this.xueliIndex = e.indexs[0]
				this.FormData.degree = this.xueliList[this.xueliIndex].id
			},
			getxueLiData() {
				index.getPublicUserMember({}, 'client/public/educationList', 'get', res => {
					if (res.data.success && res.data.code == 200) {
						this.xueliList = res.data.result
						if (this.xueliList.length > 0) {
							this.xueliIndex = 0
							this.FormData.degree = this.xueliList[0].id
						}
						let arr = []
						for (let k = 0; k < this.xueliList.length; k++) {
							arr[k] = this.xueliList[k].name
						}
						console.log("获取学历信息", arr)
						this.xuelicolumns.push(arr)
					}
				})
			},
			// dateConfirm(e) {
			// 	this.FormData.birthDate = fun.timestampToTime(e.value, '-');
			// 	console.log('选择的日期是', this.FormData.birthDate)
			// 	this.dateShow = false;
			// },
			// dateCancel(e) {
			// 	this.dateShow = false;
			// },
			// formatter(type, value) {
			// 	if (type === 'year') {
			// 		return `${value}年`
			// 	}
			// 	if (type === 'month') {
			// 		return `${value}月`
			// 	}
			// 	if (type === 'day') {
			// 		return `${value}日`
			// 	}
			// 	return value
			// },
			//时间选择
			dateChange(val){
				// this.changeVal=val;
				// console.log('dateChange',val)
				// if(val==1){
				// 	this.dateVal=this.formData.birthDate;
				// }else{
				// 	this.dateVal=this.formData.birthDate;
				// }
				this.dateShow=true;
			},
			dateConfirm(e){
				// this.formData.birthDate=fun.timestampToTime(e.value,'-');
				this.FormData.birthDate = fun.timestampToTime(e.value, '-');
					console.log('选择的日期是', this.FormData.birthDate)
					this.dateShow = false;
				// console.log('当前选择的时间是',e,this.formData.birthDate)
				// if(this.changeVal==1){
					
				// }else{
				// 	this.formData.birthDate=fun.timestampToTime(e.value,'-');
				// }
				// this.dateShow=false;
			},
			dateCancel(e){
				this.dateShow=false;
			},
			confirmAddress(val) {
				console.log(val);
				// this.address = val.value.join('')
				this.areaId = val.areaId
				this.address = val.value[1]
				this.FormData.provinceId = val.areaId[0]
				this.FormData.cityId = val.areaId[1]
				this.FormData.areaId = val.areaId[2]
				this.addressShow = false
			},
			mingzuConfirm(e) {
				console.log('名族选择', e.indexs[0])
				this.isshowmingzu = false
				this.mingzuIndex = e.indexs[0]
				this.FormData.nation = this.mingzuList[this.mingzuIndex].id
			},
			bindMultiPickerColumnChange(e) {
				console.log('名族选择*****', e)
			},
			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard()
			},
			test() {
				console.log("ceshiyixia")
			},
			sexClose() {
				// this.$refs.form1.validateField('userInfo.gender')
			},
			sexSelect(e) {
				console.log(e, '--性别--')
				this.FormData.gender = e.data.index
			},
			unloads() {
				//选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //original原图  compressed压缩
					sourceType: ['album', 'camera'], //album 相册  camera 相机
					success: (imgres) => {
						let resimg = imgres.tempFilePaths; //获取返回的文件数据
						//执行上传图片
						uni.uploadFile({
							url: index.img_url + 'client/public/upload?type=headPicture&file=' +
								resimg,
							filePath: resimg[0],
							name: 'file',
							formData: {
								user: 'test'
							},
							header: {
								'X-Access-Token': uni.getStorageSync('token'),
								'Login-Type': 'client'
							},
							success: (res) => {
								//this.faceurl=JSON.parse(cmsres.data).data.imgurl
								let imgurl = JSON.parse(res.data).result.url
								this.FormData.avatar = imgurl
							},
							fail: (err) => {
								console.log(err);
							}
						})
					}
				}); //选择图片结束
			},
			getNation() {
				index.getPublicUserMember({}, 'client/public/find/nationList', 'get', res => {
					console.log("获取名族信息", res)
					this.mingzuList = res.data.result
					if (this.mingzuList.length > 0) {
						// this.mingzuIndex = 0
						// this.FormData.nation = this.mingzuList[0].id
					}
					let arr = []
					for (let k = 0; k < this.mingzuList.length; k++) {
						arr[k] = this.mingzuList[k].name
					}
					console.log("获取名族信息", arr)
					this.mingzuListcolumns.push(arr)

				})
			},
		}
	}
</script>

<style lang="scss">
	.icon {
		width: 60px;
		height: 60px;
	}

	.userlefttext {
		color: #424242;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
	}

	.userrighttext {
		color: #A1A1A1;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
	}

	.user {
		display: flex;
		flex-direction: column;
		padding: 15px;

		.userinfo_center {
			display: flex;
			flex-direction: column;
			// margin: 15px;
			background-color: white;
			border-radius: 8px;

			.userinfo_center_item {
				// display: flex;
				// flex-direction: row;
				// justify-content: space-between;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				margin: 6px;
				height: 45px;
				// text-align: center;
				align-items: center;
				// align-items: center;
			}

			.userinfo_center_item_img {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				// text-align: center;
				// justify-content: left;
				align-items: center;
				margin-bottom: 15px;
			}

			.userinfo_center_buttom {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				height: 50px;
				.userinfo_center_buttom_item {
					display: flex;
					flex-direction: column;
					text-align: center;
				}
			}
		}
	}

	.mypage {
		display: flex;
		flex-direction: column;
		background-color: #f6f6f6;
		height: 100vh;
	}

	.content {
		flex: 1;
		overflow: auto;
	}

	.footer {
		position: static;
		buttom: 0;
		left: 0;
		right: 0;
		background-color: white;
		text-align: center;

		.footer_bgview {
			width: 100%;
			height: 80px;
			text-align: center;
			justify-content: center;
			align-items: center;
			// margin-left: 25px;
			// margin-right: 25px;
		}

		.footer_btn {
			background-color: #0575FF;
			color: white;
			border-radius: 8px;
			margin: 25px;
		}
	}
</style>